<template>
    <a-modal
            title="新增供应商员工"
            :width="760"
            :visible="visible"
            :confirmLoading="loading"
            @ok="handleSubmit"
            @cancel="() => { $emit('cancel') }"
    >
        <a-spin :spinning="loading" style="padding:15px 25px;">
            <a-form :form="form" v-bind="formLayout">
                <a-row class="form-row" :gutter="48">
                    <div v-for="(v, k) in fields" :key="k">
                        <a-col :lg="12" :md="12" :sm="24">
                          <a-form-item :label="v.label">
                <template v-if="v.type == 'select'">
                  <a-select
                    v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]"
                    @change="v.onChange">
                    <a-select-option :key="sk" v-for="(item,sk) in selectList[v.listName]" :value="v.listValue?item[v.listValue]:item">{{
                      item[v.listLabel]}}
                    </a-select-option>
                  </a-select>
                </template>
                <template v-else-if="v.type == 'textarea'">
                  <a-textarea :auto-size="{ minRows: 5, maxRows: 10 }" v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]"/>
                </template>
                <template v-else-if="v.type == 'password'">
                  <a-input-password v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]" placeholder="請輸入密碼"/>
                </template>
                <template v-else-if="v.type == 'upload'">
                  <a-upload
                    name="file"
                    :showUploadList="false"
                    :customRequest="upload"
                  >
                    <a-button> <a-icon type="upload" /> Click to Upload </a-button>
                  </a-upload>
                  <span v-if="model!==null">{{ model[v.key] }}</span>
                </template>
                <template v-else-if="v.type == 'date'">
                  <a-date-picker valueFormat="yyyy-MM-DD" v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]" />
                </template>
                <template v-else-if="v.type == 'number'">
                  <a-input v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required, min: 0, message: v.message, type: 'number',transform(value){return Number(value)}}]}]"/>
                </template>
                <template v-else>
                  <a-input :disabled="v.disabled?v.disabled:false" v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required, min: 0, message: v.message}]}]"/>
                </template>
              </a-form-item>
                        </a-col>
                    </div>
                </a-row>
            </a-form>
        </a-spin>
    </a-modal>
</template>

<script>
    import pick from 'lodash.pick'
    import { _getAllWarehouseGoodForAll } from '@/api/WarehouseGood'
    import { _internalDispatch } from '@/api/TransferRecord'
    import { _getAllWarehouse } from '@/api/warehouse'

    const typeMap = {
      0: {
        text: '乾貨'
      },
      1: {
        text: '蔬菜'
      }
    }
    // 表单字段

    export default {
        props: {
            visible: {
                type: Boolean,
                required: true
            },
            model: {
                type: Object,
                default: () => null
            },
            idGoo: {
              type: Number,
              default: 0
            },
          idBraStoPurOrdGoo: {
              type: Number,
            default: 0
          },
          index: {
              type: Number,
            default: 0
          }
        },
        data () {
            this.formLayout = {
            }
            return {
                form: this.$form.createForm(this),
                fields: [
                  { key: 'warehouseGoods', label: '調遣的貨品', required: true, message: '', type: 'select', listName: 'warehouseGoodsList', listLabel: 'label', onChange: this.handleChange },
                  { key: 'goodNo', label: '貨品編號', required: false, message: '', disabled: true },
                  { key: 'goodType', label: '貨品類別', required: false, message: '', disabled: true },
                  { key: 'categoryName', label: '貨品種類', required: false, message: '', disabled: true },
                  { key: 'quantity', label: '貨品餘量', required: false, message: '', disabled: true, type: 'number' },
                  { key: 'toIdWar', label: '目標倉庫', required: true, message: '', type: 'select', listName: 'warehouseList', listLabel: 'name', listValue: 'idWar' },
                  { key: 'quantity', label: '調遣數量', required: true, message: '', type: 'number' },
                  { key: 'transferDate', label: '調遣日期', required: true, message: '', type: 'date' }
                ],
                loading: false,
                selectList: {
                  warehouseGoodsList: [],
                  warehouseList: []
                }
            }
        },
        created () {
            // 防止表单未注册
            this.fields.forEach((v, i) => this.form.getFieldDecorator(v.key))
            // 当 model 发生改变时，为表单设置值
            this.$watch('model', () => {
                this.model && this.form.setFieldsValue(pick(this.model, this.fields))
            })
        },
        mounted () {
          _getAllWarehouseGoodForAll().then((ret) => {
            for (var i = 0; i < ret.data.length; i++) {
              ret.data[i]['label'] = ret.data[i].warehouseName + '-' + ret.data[i].goodName
            }
            this.selectList.warehouseGoodsList = ret.data
          })
          _getAllWarehouse().then((ret) => {
            this.selectList.warehouseList = ret.data
          })
        },
      filters: {
        typeFilter (type) {
          return typeMap[type].text
        }
      },
        methods: {
            // handler
          handleSubmit (e) {
            e.preventDefault()
            this.$emit('handleRefresh')
            this.form.validateFields((err, values) => {
              if (!err) {
                if (values.toIdWar === values.warehouseGoods.idWar) {
                  this.$message.error('禁止運送到相同倉庫')
                  return
                }
                // 新增
                this.loading = true
                values['formIdWarGoo'] = values.warehouseGoods.idWarGoo
                _internalDispatch(values).then((res) => this.handleSuccess(res))
              }
            })
          },
          handleSuccess (ret) {
            this.loading = false
            if (ret.code === 0) {
              this.form.resetFields()
              this.$emit('cancel')
              this.$message.info(ret.msg)
            } else {
              this.$message.error('res.msg')
            }
          },
            handleChange (val) {
              this.form.setFieldsValue({
                'goodNo': val.goodNo,
                'goodType': typeMap[val.goodType].text,
                'categoryName': val.categoryName,
                'quantity': val.quantity
              })
            }
        }
    }
</script>
